<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ASCII Test</title>
<style type="text/css">
    	.getCodeButton {
    		border:0px;
    		width:100%;
    		height:100%;
    		text-align:center;
    		background-color:#e24344;
    		color:white;
    	}
    </style>
<script src="javascripts/jquery-1.10.1.min.js"></script>
<!-- 
	中文字符，ASCII值互转，解决JS里中文显示到页面出现乱码的问题
 -->
<script type="text/javascript">

   $(function(){
    //alert('\u975e\u5b98\u65b9\u7684\u4e2a');
    var input = prompt('请输入消息');
    if(input){
    	var str1 = native2ascii(input);
	    var str2 = ascii2native(input);
	    console.log(str1);
	    console.info(str2);
	    // 输出到页面
	    var $un1 = $(".un1");
	    var $un2 = $(".un2");
	    $un1.find("span").text(str1);
	    $un2.find("span").text(str2);
    }

    $('#getCodeBtn').click(function(){
    	var url = window.location.href;
    	window.location.href = url;
    });
});


function native2ascii(nativecode) {
    nativecode = nativecode.split("");
    var ascii = "";
    for (var i = 0; i < nativecode.length; i++) {
        var code = Number(nativecode[i].charCodeAt(0));
        if (code > 127) {
            var charAscii = code.toString(16);
            charAscii = new String("0000").substring(charAscii.length, 4) + charAscii;
            ascii += "\\u" + charAscii;
        } else {
            ascii += nativecode[i];
        }
    }
    return ascii;
}
 
function ascii2native(asciicode) {
    asciicode = asciicode.split("\\u");
    var nativeValue = asciicode[0];
    for (var i = 1; i < asciicode.length; i++) {
        var code = asciicode[i];
        nativeValue += String.fromCharCode(parseInt("0x" + code.substring(0, 4)));
        if (code.length > 4) {
            nativeValue += code.substring(4, code.length);
        }
    }
    return nativeValue;
}

</script>

</head>

<body>
    <!-- <p style="text-align: center;">Loading...</p> -->
    <div class="un1"><span></span></div>
    <div class="un2"><span></span></div>
    <br />
    <!-- 
    <input type="text" id='numCode'name="numCode" placeholder="请输入正确的答案"/>
     -->
    <button id="getCodeBtn" class="getCodeButton">重新输入</button>
</body>

</html>
